"use client";

import { useContext, useState, useEffect } from "react";
import { Box, Image } from "@chakra-ui/react";
import { MainContext } from "@/src/providers/MainProvider";
import { getImgPath } from "@/src/utils";

const imgPath = getImgPath();

const MouseComponent = () => {
  const { selKeyIndex, currentTab, deviceName } = useContext(MainContext);
  const [activeKeyIndex, setaAtiveKeyIndex] = useState<number>(-1);
  const [mouseName, setMouseName] = useState<string>("g3");

  useEffect(() => {
    if (currentTab == "mousekey" || currentTab == "home") {
      setaAtiveKeyIndex(selKeyIndex);
    }
  }, [selKeyIndex]);

  useEffect(() => {
    if (deviceName.includes("G7")) {
      setMouseName("g7");
    } else if (deviceName.includes("A7e")) {
      setMouseName("A7e");
    } else if (deviceName.includes("G3 V2")) {
      setMouseName("g3_v2");
    } else {
      setMouseName("g3");
    }
  }, [deviceName]);

  const getMouseBodyImg = () => {
    return `${imgPath}/products/mouse-v1000.png`;
  };

  return (
    <Box className={`g3_mouse_box`}>
      <Image
        className="mouse_body position-a"
        src={getMouseBodyImg()}
        alt="Mouse Body"
      />
    </Box>
  );
};

export default MouseComponent;
